{template 'web/default/base_menu'}
<script src="{MODULE_URL}template/resources/highcharts/highcharts.js"></script>
<div class="top_tab"> 
  <a href="{php echo $this->createWebUrl('salemember')}" class="layui-btn {if $operation != 'display'}layui-btn-primary{/if}">会员统计</a>
    <a href="{php echo $this->createWebUrl('salemember',array('op'=>'detail'))}" class="layui-btn {if $operation != 'detail'}layui-btn-primary{/if}">明细</a>
</div>
<style>
.panelbox-head a{ margin-right:10px}
.green{ color:#090}
.orange{ color:#F60}
.showbox{ margin-right:10px; background:#EEE; padding:10px 20px;}
.showbox2{margin-right:10px;}
.showbox h3{ font-size:12px; text-align:left; margin:20px 0 30px 0}
.showbox h3 b{ font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#F60}
h2{ font-size:18px; margin:10px;}
</style>
{if $operation == 'display'}
<div class="panelbox">
<form action="" method="post" class="layui-form" enctype="multipart/form-data">
  <div class="panelbox-head">
  	<!--<a href="" class="layui-btn layui-btn-small"><i class="layui-icon">&#xe601;</i> 导出</a>-->
    <div class="layui-btn-group selecttime">
      <button type="button" class="layui-btn layui-btn-small">今天</button>
      <button type="button" class="layui-btn layui-btn-primary layui-btn-small">昨天</button>
      <button type="button" class="layui-btn layui-btn-primary layui-btn-small">近7天</button>
      <button type="button" class="layui-btn layui-btn-primary layui-btn-small">其他</button>
    </div>
    <span id="top_time" style="display:none">{php echo tpl_form_field_daterange('gametime', array('start' => date('Y-m-d H:i'),'end'=>date('Y-m-d H:i')),true)} <button type="button" onclick="getpage(1)" class="layui-btn layui-btn-danger layui-btn-small">查询</button></span>
    <input type="hidden" name="dateselect" value="1" />
  </div>
  <div class="panelbox-body">
  	<h2>散客-消费统计</h2>
    <div class="row notmember">
    	<div class="col-md-3">
        	<div class="showbox">
            	<p>销售笔数</p>
                <h3><b>99</b> 笔</h3>
            </div>
        </div>
        <div class="col-md-3">
        	<div class="showbox">
            	<p>销售金额</p>
                <h3>￥ <b>99</b> </h3>
            </div>
        </div>
        <div class="col-md-3">
        	<div class="showbox">
            	<p>客单价</p>
                <h3>￥ <b>99</b> </h3>
            </div>
        </div>
        <div class="col-md-3">
        	<div class="showbox">
            	<p>商品单价</p>
                <h3>￥ <b>99</b> </h3>
            </div>
        </div>
    </div>
    <h2>会员-消费统计</h2>
    <div class="row member">
    	<div class="col-md-3">
        	<div class="showbox">
            	<p>销售笔数</p>
                <h3><b>99</b> 笔</h3>
            </div>
        </div>
        <div class="col-md-3">
        	<div class="showbox">
            	<p>销售金额</p>
                <h3>￥ <b>99</b> </h3>
            </div>
        </div>
        <div class="col-md-3">
        	<div class="showbox">
            	<p>客单价</p>
                <h3>￥ <b>99</b> </h3>
            </div>
        </div>
        <div class="col-md-3">
        	<div class="showbox">
            	<p>商品单价</p>
                <h3>￥ <b>99</b> </h3>
            </div>
        </div>
    </div>
  </div>
  </form>
</div>
<div class="panelbox">
	<div class="panelbox-body">
    	<div class="row">
        	<div class="col-md-3">
                <div class="showbox2">
                    <div id="container1"></div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="showbox2">
                    <div id="container2"></div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="showbox2">
                    <div id="container3"></div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="showbox2">
                    <div id="container4"></div>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>
<script language="javascript">
$(".selecttime button").on("click",function(){
	var val=$(this).index()+1;
	$("input[name='dateselect']").val(val);
	$(this).removeClass("layui-btn-primary").siblings().addClass("layui-btn-primary");
	if($(this).text()=="其他"){
		$("#top_time").show();
	}else{
		$("#top_time").hide();
		getpage(1);
	}
});
layui.use(['layer', 'laypage', 'element','form'], function(){
  var layer = layui.layer
  ,laypage = layui.laypage
  ,element = layui.element
  ,form = layui.form;
  getpage(1);
  
  form.on('submit(submitbtn)', function(data){
    
    return true;
  });
});
function getpage(){
	var index2=layer.load(1, {shade: [0.1,'#fff']});
	var searchdata={
		"datetype":$("input[name='dateselect']").val(),
		"statrtime":$("input[name='gametime[start]']").val(),	
		"endtime":$("input[name='gametime[end]']").val(),
	}
	$.post("{php echo $this->createWebUrl('salemember',array('op'=>'getinfo'))}",searchdata,function(returnstr){
		layer.close(index2);
		console.log(returnstr);
		var result=eval("("+returnstr+")");
		if(result.success){
			var notmember=result.notmember;
			var member=result.member;
			$(".notmember h3").eq(0).find("b").text(notmember.num1);
			$(".notmember h3").eq(1).find("b").text(notmember.num2 ? fee2num(notmember.num2) : 0);
			$(".notmember h3").eq(2).find("b").text(fee2num(parseInt(parseInt(notmember.num2)/parseInt(notmember.num1))));
			$(".notmember h3").eq(3).find("b").text(fee2num(parseInt(parseInt(notmember.num2)/parseInt(notmember.num3))));
			
			$(".member h3").eq(0).find("b").text(member.num1);
			$(".member h3").eq(1).find("b").text(member.num2 ? fee2num(member.num2) : 0);
			$(".member h3").eq(2).find("b").text(fee2num(parseInt(parseInt(member.num2)/parseInt(member.num1))));
			$(".member h3").eq(3).find("b").text(fee2num(parseInt(parseInt(member.num2)/parseInt(member.num3))));
			showPicture(notmember,member);
		}else{
			layer.msg(result.msg ? result.msg : returnstr,{icon:2,time:2000});
			return;
		}
	});
}
function showPicture(a,b){
	var Nnum1=parseInt(a.num1);
	var Nnum2=parseInt(a.num2);
	var Nnum3=parseInt(a.num3);
	var Mnum1=parseInt(b.num1);
	var Mnum2=parseInt(b.num2);
	var Mnum3=parseInt(b.num3);
	if(Nnum1==0 && Mnum1==0)return;
	$('#container1').highcharts({
		chart: {
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false
		},
		title: {
			text: '销售量占比'
		},
		tooltip: {
			headerFormat: '{series.name}<br>',
			pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: true,
					format: '<b>{point.name}</b>: {point.percentage:.1f} %',
					style: {
						color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
					}
				}
			}
		},
		series: [{
			type: 'pie',
			name: '销售量占比',
			data: [
				['散客',Nnum1],
				['会员',Mnum1],
			]
		}]
	});
	$('#container2').highcharts({
		chart: {
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false
		},
		title: {
			text: '销售金额占比'
		},
		tooltip: {
			headerFormat: '{series.name}<br>',
			pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: true,
					format: '<b>{point.name}</b>: {point.percentage:.1f} %',
					style: {
						color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
					}
				}
			}
		},
		series: [{
			type: 'pie',
			name: '销售金额占比',
			data: [
				['散客',Nnum2],
				['会员',Mnum2],
			]
		}]
	});
	
	$('#container3').highcharts({
		chart: {
			plotBackgroundColor: null,
			plotBorderWidth: null,
			plotShadow: false
		},
		title: {
			text: '销售商品数量占比'
		},
		tooltip: {
			headerFormat: '{series.name}<br>',
			pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				dataLabels: {
					enabled: true,
					format: '<b>{point.name}</b>: {point.percentage:.1f} %',
					style: {
						color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
					}
				}
			}
		},
		series: [{
			type: 'pie',
			name: '销售商品数量占比',
			data: [
				['散客',Nnum3],
				['会员',Mnum3],
			]
		}]
	});
}
</script>
{elseif $operation == 'detail'}
<Style>
    #salelist td p{font-size: smaller;}
    .green{color:#00bf00}
</Style>
<div class="panelbox">
    <form action="" method="post" class="layui-form" enctype="multipart/form-data">
        <div class="panelbox-head form-inline">

            <div class="layui-btn-group selecttime">
                <button type="button" class="layui-btn {if $_GPC['datetype']!=1}layui-btn-primary{/if} layui-btn-small">今天</button>
                <button type="button" class="layui-btn {if $_GPC['datetype']!=2}layui-btn-primary{/if} layui-btn-small">昨天</button>
                <button type="button" class="layui-btn {if $_GPC['datetype']!=3}layui-btn-primary{/if} layui-btn-small">近7天</button>
                <button type="button" class="layui-btn {if $_GPC['datetype']!=4}layui-btn-primary{/if} layui-btn-small">其他</button>
            </div>
            <span id="top_time" {if $_GPC['datetype']!=4}style="display: none"{/if}>{php echo tpl_form_field_daterange('gametime', array('start' => $starttime,'end'=>$endtime),false)} </span> <input type="text" name="keyword" value="{$_GPC['keyword']}" class="form-control" placeholder="请输入关键字"/>
            <select id="usetype" lay-ignore class="form-control">
                <option value="0">操作类型</option>
                <option value="1" {if $_GPC['usetype']==1}selected{/if}>充值</option>
                <option value="2" {if $_GPC['usetype']==2}selected{/if}>消费</option>
                <option value="3" {if $_GPC['usetype']==3}selected{/if}>退还</option>
            </select>
            <select id="mstatus" lay-ignore class="form-control">
                <option value="0">状态</option>
                <option value="2" {if $_GPC['mstatus']==2}selected{/if}>成功</option>
                <option value="1" {if $_GPC['mstatus']==1}selected{/if}>失败</option>
            </select>
            <button type="button" onclick="getpage()" class="layui-btn layui-btn-danger layui-btn-small">查询</button>
            <input type="hidden" name="dateselect" value="{$_GPC['datetype']}" />
        </div>
        <div class="panelbox-body">
            <div class="layui-form">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>卡号</th>
                        <th>操作类型</th>
                        <th>支付</th>
                        <th>前金额</th>
                        <th>金额</th>
                        <th>赠送</th>
                        <th>后金额</th>
                        <th>时间</th>
                        <th>备注</th>
                        <th>状态</th>
                    </tr>
                    </thead>
                    <tbody id="salelist">
                    {loop $list $row}
                    <tr>
                        <td>{$row['realname']}<p>Tel:{$row['mobile']}</p><p>{if $row['cardno']}{$row['cardno']}{else}{$row['wxcardno']}{/if}</p></td>
                        <td>
                            {if $row['usetype']==0}
                            <span class="label label-success">充值</span>
                            {elseif $row['usetype']==1}
                            <span class="label label-warning">消费</span>
                            {else}
                            <span class="label label-danger">退还</span>
                            {/if}
                        </td>
                        <td>
                            {if $row['paytype']==0}
                            <span class="label label-success">微信</span>
                            {elseif $row['paytype']==1}
                            <span class="label label-info">支付宝</span>
                            {elseif $row['paytype']==2}
                            <span class="label label-warning">现金</span>
                            {elseif $row['paytype']==3}
                            <span class="label label-primary">银行卡</span>
                            {else}
                            -
                            {/if}
                        </td>
                        <td>{php echo $this->_2money($row['startfee'])}</td>
                        <td>
                            {if $row['usetype']==1}
                            <span class="green">-{php echo $this->_2money($row['cash'])}</span>
                            {else}
                            {php echo $this->_2money($row['cash'])}
                            {/if}
                        </td>
                        <td>{php echo $this->_2money($row['gift'])}</td>
                        <td>{php echo $this->_2money($row['endfee'])}</td>
                        <td>{php echo date('m/d H:i',$row['createtime'])}</td>
                        <td>{$row['remark']}</td>

                        <td>
                            {if $row['status']==1}
                            <span class="label label-success"><i class="fa fa-ok"></i></span>
                            {else}
                            <span class="label label-default">&times;</span>
                            {/if}

                        </td>
                    </tr>
                    {/loop}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="panelbox-foot text-right">{$pager}</div>
    </form>
</div>
<script>
    $(".selecttime button").on("click",function(){
        var val=$(this).index()+1;
        $("input[name='dateselect']").val(val);
        $(this).removeClass("layui-btn-primary").siblings().addClass("layui-btn-primary");
        if($(this).text()!="其他"){
            getpage(1);
        }else{
            $("#top_time").show();
        }
    });
    layui.use(['layer', 'laypage', 'element','form'], function(){
        var layer = layui.layer
                ,laypage = layui.laypage
                ,element = layui.element
                ,form = layui.form;
        form.on('submit(submitbtn)', function(data){
            return true;
        });
    });
    function getpage(){
        var index2=layer.load(1, {shade: [0.1,'#fff']});
        var url="{php echo $this->createWebUrl('salemember',array('op'=>'detail'))}&datetype="+$("input[name='dateselect']").val()+"&statrtime="+$("input[name='gametime[start]']").val()+"&endtime="+$("input[name='gametime[end]']").val()+"&keyword="+$("input[name='keyword").val()+"&usetype="+$("#usetype").val()+"&mstatus="+$("#mstatus").val();
        location.href=url;
    }
</script>
{/if}